.csp {
  height: 100%;
  &-header{
      margin-bottom: 10px;
      background: $color-grey-light-4;
      display: flex;
  }
  &-content{
      height: 100%;
      display: flex;
      flex-direction: column;
      &-tag{
          height: 100%;
          &-action{
              height: 50px;
              margin-bottom: 10px;
              background-color: $color-grey-light-4;
              color:$color-black-light;
              border-bottom: 1px solid $color-grey-light-2;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              
              &-label{
                  width: 60%;
                  
                  &-show{
                      background-color: $color-grey-light-4;
                      border: 1px solid $color-grey-light-3;
                      border-radius: 5px;
                      margin: 0 20px;
                      &-nill{
                          border-radius: 5px;
                          background-color: rgba($color: #4ABAC4, $alpha: 0.3);
                          color:$color-white;
                          text-align: center;
                      }
                      &-y{
                          border-radius: 10px;
                          display: flex;
                          align-items: center;
                      }
                  }
              }
              &-block{
                  width: 40%;
                  border-left: 1px solid $color-grey-light-2;
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  &-c{
                      width: 50px;
                      height: 24px;
                      background-color: $color-fourth-light;
                      color: $color-white;
                      border: 0;
                      padding: 0;
                      border-radius: 50px;
                      font-size: 18px;
                      font-weight: 900;
                  }
              }
          }
          &-page{
              height: 100%;
              background-color: $color-grey-light-4;
              &-wh{
                  margin: 5px 10px;
                  // width: 1000px;
                  // height: 100%;
                  &-header{
                      // width: 96%;
                      height: 30px;
                      background-color: #4ABAC4;
                      color:$color-white;
                      text-align:center;
                      font-size: 16px;
                      font-weight: 500;
                  }
                  &-body{
                      // width: 96%;
                      // height: 300px;
                      background-color: $color-grey-light-4;
                      border: 1px solid #eee;
                  }
                  
              }
          }
          &-footer{
            margin-top: 30px;
            background-color: $color-grey-light-4;
            display: flex;
            justify-content: flex-end;
            &-btn{
              width: max-content;
              font-size: 12px;
              font-weight: 400;
              display: block;
              background-color: red;
              border: 0;
              border-radius: 0.5rem;
              margin: 0 2rem;
              padding: 2px 15px;
              color: #ffffff;
              cursor: pointer;
              &:hover{
                  background-color: $color-fourth-light;
              }
              &:active{
                  transform: translateY(2px);
              }
            }
          }
          
      }
  }
}

.ques {
  &-header{
      text-align: center;
      font-size: 14px;
      font-weight: 300;
  }
  &-body{
    padding-bottom: 30px;
      display: flex;
      &-question{
          width: 50%;
          &-title{
            padding: 10px 0;
              text-align: center;
              font-size: 14px;
              font-weight: 500;
              color: $color-black-light;
              
          }
          &-content{
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            &-up{
              height: 60%;
              &-block{
                width: 100%;
              }
            }
            &-down{
              height: 40%;
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              &-a{
                &-l{
                  background-color: #4abac4;
                border: 0;
                border-radius: 0.5rem;
                color: #ffffff;
                margin-left: 20px;
                padding: 5px 10px;
                }
              }
            }
          }
      }
      &-options{
          width: 50%;
          &-title{
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: $color-black-light;
            display: flex;
            justify-content: space-around;
              &-label{
                width: 80%;
              }
              &-add{
                width: 20%;
                &-btn{
                  // background-color: #4abac4;
                  font-size: 12px;
                  font-weight: 300;
                  border: 0;
                  border-radius: 5px;
                  color: $color-black-light;
                  width: max-content;
                  margin: 0;
                  padding: 0 10px;
                  cursor: pointer;
                }
                &-btn:hover{
                  background-color: #4abac4;
                  color: $color-white;
                }
              }
        }
        &-content{
          width: 100%;
          &-item{
            display: flex;
          flex-wrap: wrap;
          justify-content: center;
            &-options{
              width: 160px;
              margin: 10px 20px;
            }
            &-btn{
              background-color: #4abac4;
              border: 0;
              border-radius: 0.5rem;
              color: #ffffff;
              width: 30px;
              margin: 0;
              padding: 0.5rem 0.5rem;
            }
          }
        }
      }
  }
}

.cspvote {
&-header{
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    &-btn{
      background-color: #f9f7f6;
              border: 0;
              border-radius: 0.5rem;
              letter-spacing: 5px;
              font-weight: 300;
              color: #999;
              width: max-content;
              margin-top: 10px;
              padding: 0 5px;
              cursor: pointer;
    }
    &-btn:hover{
      background-color: #4ABAC4;
      color: white;
    }
}
&-body{
  padding-bottom: 30px;
    display: flex;
    &-question{
        width: 50%;
        &-title{
          padding: 10px 0;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: $color-black-light;
            
        }
        &-content{
          margin: 0 10px;
          display: flex;
          flex-direction: column;
          &-up{
            height: 60%;
            &-block{
              width: 100%;
            }
          }
          &-down{
            height: 40%;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &-a{
              &-l{
                background-color: #4abac4;
              border: 0;
              border-radius: 0.5rem;
              color: #ffffff;
              margin-left: 20px;
              padding: 5px 10px;
              }
            }
          }
        }
    }
    &-options{
        width: 50%;
        &-title{
          padding: 10px 0;
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          color: $color-black-light;
          display: flex;
          justify-content: space-around;
            &-label{
              width: 80%;
            }
            &-add{
              width: 20%;
              &-btn{
                // background-color: #4abac4;
                font-size: 12px;
                font-weight: 300;
                border: 0;
                border-radius: 5px;
                color: $color-black-light;
                width: max-content;
                margin: 0;
                padding: 0 10px;
                cursor: pointer;
              }
              &-btn:hover{
                background-color: #4abac4;
                color: $color-white;
              }
            }
      }
      &-content{
        width: 100%;
        &-item{
          display: flex;
        flex-wrap: wrap;
        justify-content: center;
          &-options{
            width: 160px;
            margin: 10px 20px;
          }
          &-btn{
            background-color: #4abac4;
            border: 0;
            border-radius: 0.5rem;
            color: #ffffff;
            width: 30px;
            margin: 0;
            padding: 0.5rem 0.5rem;
          }
        }
      }
    }
}
}

.cspTest{
height: 500px;
&-header{
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  height: min-content;
}
&-body{
  height: max-content;
  &-title{
    height: min-content;
    &-btn{
      font-size: 12px;
      font-weight: 300;
      border: 0;
      border-radius: 5px;
      color: $color-black-light;
      width: max-content;
      margin: 0;
      padding: 0 10px;
      cursor: pointer;
    }
    &-btn:hover{
      background-color: #4abac4;
      color: $color-white;
    }
  }
  &-content{
    height: max-content;
    display: flex;
    &-tran{
      width: 100%;
      &-title{
        width: 100%;
        font-size: 12px;
        font-weight: 300;
        border: 0;
        border-radius: 5px;
        color: $color-black-light;
        // width: max-content;
        margin: 0;
        padding: 0 10px;
        text-align: center;
      }
      &-content{

      }
    }
    // &-left{
    //   width: 50%;
    //   background-color: bisque;
    // }
    // &-right{
    //   width: 50%;
    //   background-color: salmon;
    // }
  }
}
}

.race {
&-header{
    text-align: center;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    // align-content: center;
    &-label{
      font-size: 14px;
      font-weight: 300;
      margin: 0 10px;
    }
    &-inp{
      width: 160px;
      margin: 0 10px;
    }
}
&-body{
  padding-bottom: 30px;
    display: flex;
    &-question{
        width: 50%;
        &-title{
          padding: 10px 0;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: $color-black-light;
            
        }
        &-content{
          margin: 0 10px;
          display: flex;
          flex-direction: column;
          &-up{
            height: 60%;
            &-block{
              width: 100%;
            }
          }
          &-down{
            height: 40%;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &-a{
              &-l{
                background-color: #4abac4;
              border: 0;
              border-radius: 0.5rem;
              color: #ffffff;
              margin-left: 20px;
              padding: 5px 10px;
              }
            }
          }
        }
    }
    &-options{
        width: 50%;
        &-title{
          padding: 10px 0;
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          color: $color-black-light;
          display: flex;
          justify-content: space-around;
            &-label{
              width: 80%;
            }
            &-add{
              width: 20%;
              &-btn{
                // background-color: #4abac4;
                font-size: 12px;
                font-weight: 300;
                border: 0;
                border-radius: 5px;
                color: $color-black-light;
                width: max-content;
                margin: 0;
                padding: 0 10px;
                cursor: pointer;
              }
              &-btn:hover{
                background-color: #4abac4;
                color: $color-white;
              }
            }
      }
      &-content{
        width: 100%;
        &-item{
          display: flex;
        flex-wrap: wrap;
        justify-content: center;
          &-options{
            width: 160px;
            margin: 10px 20px;
          }
          &-btn{
            background-color: #4abac4;
            border: 0;
            border-radius: 0.5rem;
            color: #ffffff;
            width: 30px;
            margin: 0;
            padding: 0.5rem 0.5rem;
          }
        }
      }
    }
}
}